import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Button, Input, Tooltip, Icon, DatePicker, Select } from 'antd';
import styles from './index.less';
import moment from 'moment';

import { Const } from '../../Const';

const FormItem = Form.Item;
const { Option } = Select;

const Setp1 = props => {

  const { prevStep, nextStep, className, form, itemData, isHave, selectCityData, stepCurrent } = props;

  // useEffect(() => {
  //   if (stepCurrent === 0) {
  //     console.log(itemData, 'itemData');
  //   }
  // }, [stepCurrent, itemData]);

  // 禁用今天之后的时间
  const disabledDate = useCallback((current) => {
    return current && current > moment().endOf('day');
  }, []);

  // 航班号 - 校验
  const flightDateValidator = useCallback((rule, value, callback) => {
    if (value) {
      if (/^[0-9A-Za-z]{5,6}$/.test(value)) {
        callback();
      } else {
        callback('输入错误，请认真核对');
      }
    } else {
      callback('')
    }
  }, []);

  // 证件号 - 验证
  const idNoValidator = useCallback((rule, value, callback) => {
    let idType = form.getFieldValue('idType');
    if (value) {
      Const.idNoValidator(idType, value, callback);
    } else {
      callback('')
    }
  }, [form]);

  // 舱位验证
  const subCabinValidator = useCallback((rule, value, callback) => {
    if (value) {
      let val = Const.toUpperCaseFormat(value);
      if (/^[A-Z]*$/.test(val) && val.length <= 6) {
        callback();
        setTimeout(() => {
          form.setFieldsValue({
            'subCabin': val
          })
        }, 0);
      } else {
        callback('格式不正确');
      }
    } else {
      callback();
    }
  }, [form])

  // 始发站、目的站选择
  const cityAirpChange = useCallback((val, type) => {
    // type: org始发站 dst目的站
    if (type === 'org' && form.getFieldValue('dst')) {
      setTimeout(() => {
        form.setFieldsValue({
          segment: val + '-' + form.getFieldValue('dst')
        })
      }, 0)
    }
    if (type === 'dst' && form.getFieldValue('org')) {
      setTimeout(() => {
        form.setFieldsValue({
          segment: form.getFieldValue('org') + '-' + val
        })
      }, 0)
    }
  }, [form]);

  // 下一步
  const step1NextStep = useCallback(() => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      console.log(fieldsValue, 'fieldsValue');
      if (fieldsValue.pkgFlightDate && fieldsValue.pkgFlightDate.isValid()) {
        fieldsValue.pkgFlightDate = moment(fieldsValue.pkgFlightDate).format(Const.format);
      }
      nextStep({
        ...fieldsValue,
        paxId: itemData.paxId
      });
    })
  }, [itemData]);

  return (
    <div className={`${styles.stepWrapper} ${className}`}>
      <div className={styles.stepContent}>
        <div className={styles.formContent}>
          <FormItem label="旅客姓名(NM)">
            {form.getFieldDecorator('paxName', {
              rules: [
                { required: true, message: '请输入旅客姓名' }
              ],
              initialValue: itemData.paxName || ''
            })(
              <Input placeholder="请输入" disabled maxLength={20} />
            )}
          </FormItem>
          <FormItem label="缩写(IT)">
            {form.getFieldDecorator('paxInitials', {
              rules: [],
              initialValue: itemData.paxInitials || ''
            })(
              <Input placeholder="请输入" maxLength={8} maxLength={20} />
            )}
          </FormItem>
          <FormItem label="证件类型">
            {form.getFieldDecorator('idType', {
              rules: [
                { required: true, message: '请选择证件类型' }
              ],
              initialValue: Const.dealIdType(itemData?.idType)
            })(
              <Select
                allowClear
                placeholder="请选择"
                disabled
                style={{ width: '100%' }}
              >
                {Const.idTypeListForSearch.map(item => <Option key={item.value} value={item.value}>{item.label}</Option>)}
              </Select>
            )}
          </FormItem>
          <FormItem label="证件号">
            {form.getFieldDecorator('idNo', {
              rules: [
                { required: true, message: '请输入证件号' },
                { validator: idNoValidator }
              ],
              initialValue: itemData.idNo || ''
            })(
              <Input placeholder="请输入" disabled maxLength={18} />
            )}
          </FormItem>
        </div>
        <div className={styles.formContent}>
          <FormItem label="客票号">
            {form.getFieldDecorator('tktNo', {
              rules: [
                { required: true, message: '请输入客票号' },
                { pattern: /^\d{13}$/, message: '请输入13位数字' },
              ],
              initialValue: itemData.tktNo || ''
            })(
              <Input placeholder="请输入" maxLength={13} disabled />
            )}
          </FormItem>
          <FormItem label="舱位">
            {form.getFieldDecorator('subCabin', {
              rules: [
                { validator: subCabinValidator }
                // { pattern: /^[A-Z]*$/, message: '格式不正确' }
              ],
              initialValue: itemData.cabin || ''
            })(
              <Input
                placeholder="请输入"
                suffix={
                  <Tooltip title="例A">
                    <Icon type="question-circle" style={{ color: Const.tooltipColor }} />
                  </Tooltip>
                }
                maxLength={6} />
            )}
          </FormItem>
          <FormItem label="航班号">
            {form.getFieldDecorator('pkgFlightNo', {
              rules: [
                { required: true, message: '请输入航班号' },
                { validator: flightDateValidator }
              ],
              initialValue: itemData.flightNo || ''
            })(
              <Input
                placeholder="3U"
                suffix={
                  <Tooltip title="例AA123、AA1234、AA123A、AA1234A、MF8943A、3U234">
                    <Icon type="question-circle" style={{ color: Const.tooltipColor }} />
                  </Tooltip>
                }
                disabled
                maxLength={6} />
            )}
          </FormItem>
          <FormItem label="航班日期">
            {form.getFieldDecorator('pkgFlightDate', {
              rules: [
                { required: true, message: '请选择航班日期' }
              ],
              initialValue: itemData.flightDate ? moment(itemData.flightDate) : moment()
            })(
              <DatePicker
                style={{ width: '100%' }}
                format={Const.format}
                disabled
                disabledDate={disabledDate}
              />
            )}
          </FormItem>
        </div>
        <div className={styles.formContent}>
          <FormItem label="始发站">
            {form.getFieldDecorator('org', {
              rules: [
                { required: true, message: '请选择始发站' }
              ],
              initialValue: itemData.org || ''
            })(
              <Select
                allowClear
                showSearch
                placeholder="请选择"
                disabled
                onChange={val => cityAirpChange(val, 'org')}
                style={{ width: '100%' }}
                optionFilterProp="children"
              >
                {selectCityData.map(({ CITYNAME, CITY3CODE }) => <Option key={CITY3CODE} value={CITY3CODE}>{CITYNAME}-{CITY3CODE}</Option>)}
              </Select>
            )}
          </FormItem>
          <FormItem label="目的站">
            {form.getFieldDecorator('dst', {
              rules: [
                { required: true, message: '请选择目的站' }
              ],
              initialValue: itemData.dst || ''
            })(
              <Select
                allowClear
                showSearch
                placeholder="请选择"
                disabled
                onChange={val => cityAirpChange(val, 'dst')}
                style={{ width: '100%' }}
                optionFilterProp="children"
              >
                {selectCityData.map(({ CITYNAME, CITY3CODE }) => <Option key={CITY3CODE} value={CITY3CODE}>{CITYNAME}-{CITY3CODE}</Option>)}
              </Select>
            )}
          </FormItem>
          <FormItem label="旅客航程">
            {form.getFieldDecorator('segment', {
              rules: [
                { required: true, message: '请输入旅客航程' }
              ],
              initialValue: itemData.segment || ''
            })(
              <Input
                placeholder="请输入"
                suffix={
                  <Tooltip title="例XMN-FOC,XMN-PEK-FOC">
                    <Icon type="question-circle" style={{ color: Const.tooltipColor }} />
                  </Tooltip>
                }
                disabled />
            )}
          </FormItem>
          <FormItem label="飞机号">
            {form.getFieldDecorator('planeCode', {
              rules: [],
              initialValue: itemData.planeCode || ''
            })(
              <Input placeholder="请输入" maxLength={6} />
            )}
          </FormItem>
        </div>
        <div className={styles.formContent}>
          <FormItem label="飞机型号">
            {form.getFieldDecorator('acType', {
              rules: [],
              initialValue: itemData.acType || ''
            })(
              <Input placeholder="请输入" maxLength={10} />
            )}
          </FormItem>
        </div>
      </div>
      <div className={styles.btnBox}>
        <Button onClick={prevStep} style={{ marginRight: '10px' }}>返回</Button>
        <Button type="primary" onClick={step1NextStep}>下一步</Button>
      </div>
    </div>
  )
}

export default Form.create()(Setp1);
